<template>
  <dt-modal-edit ref="editRef" title="项目功能包变更" @ok="onOk" @cancelData="cancelData" style="top: 20px">
    <div class="topBox">
      <span>
        <Icon style="vertical-align: -8px" size="30" color="#2D61F4" type="ios-list-box-outline" />
        {{ projectPackage.tenantName }}（编号：{{ projectPackage.tenantCode }}）-
        {{ projectPackage.tenantStatusName }}
      </span>
    </div>

    <div>
      <div class="tips">
        <Icon type="ios-alert" color="#2D61F4" class="tips_icon" />
        您可通过勾选或取消勾选方式，对项目所包含的功能包进行变更。保存后，系统将把所有处于“勾选状态”的功能包同步至SaaS端
      </div>
      <div>
        <Tabs v-model="permissionVal" @on-click="getTab" type="card">
          <TabPane label="期内套餐" name="1">
            <div class="permissionCon">
              <div class="permissionBox" v-for="item in duringPackage" :key="item.id">
                <span v-if="item.isNum" :class="['sp', `sp${item.isNum}`]">
                  {{ item.isNum == 1 ? '当前功能包' : item.isNum == 2 ? '移除功能包' : '新增功能包' }}
                </span>
                <Checkbox
                  v-model="item.checked"
                  class="checkCon"
                  @on-change="
                    (e) => {
                      checkedChange(e, item, 1)
                    }
                  "></Checkbox>
                <div class="permiss">
                  <p class="p1">
                    {{ item.title }}
                    <span @click="searchPermission(item)">查看权限</span>
                  </p>
                  <p class="p2">
                    {{ item.internalContent }}
                  </p>
                </div>
              </div>
            </div>
          </TabPane>
          <TabPane label="期外套餐" name="2">
            <div class="permissionCon">
              <div class="permissionBox" v-for="item in extraPackage" :key="item.id">
                <span v-if="item.isNum" :class="['sp', `sp${item.isNum}`]">
                  {{ item.isNum == 1 ? '当前功能包' : item.isNum == 2 ? '移除功能包' : '新增功能包' }}
                </span>
                <Checkbox
                  v-model="item.checked"
                  class="checkCon"
                  @on-change="
                    (e) => {
                      checkedChange(e, item, 2)
                    }
                  "></Checkbox>
                <div class="permiss">
                  <p class="p1">
                    {{ item.title }}
                    <span @click="searchPermission(item)">查看权限</span>
                  </p>
                  <p class="p2">
                    {{ item.internalContent }}
                  </p>
                </div>
              </div>
            </div>
          </TabPane>
        </Tabs>
      </div>
    </div>
    <Modal v-model="leaveModal" title="项目功能包变更确认" :footer-hide="true" transfer>
      <div>
        <Form ref="form">
          <h3 class="title">变更后移除功能包</h3>
          <FormItem label="期内套餐：">{{ infoVal.removeN || '-' }}</FormItem>
          <FormItem label="期外套餐：">{{ infoVal.removeW || '-' }}</FormItem>
          <h3 class="title">变更后新增功能包</h3>
          <FormItem label="期内套餐：">{{ infoVal.addN || '-' }}</FormItem>
          <FormItem label="期外套餐：">{{ infoVal.addW || '-' }}</FormItem>
          <div class="classBox">
            <h3 class="title">变更后项目功能包</h3>
            <div class="tips">
              <Icon type="ios-alert" color="#2D61F4" class="tips_icon" />
              变更后，项目将包含以下功能包。请在核对无误后，点击“确定”按钮进行保存。
              <span style="color: 'red'">保存后，功能包将在项目中立即生效</span>
            </div>
            <FormItem label="期内套餐：">{{ infoVal.allN || '-' }}</FormItem>
            <FormItem label="期外套餐：">{{ infoVal.allW || '-' }}</FormItem>
          </div>
        </Form>
      </div>
      <div class="leaveBtnBox">
        <Button @click="noSave">取消</Button>
        <Button type="primary" @click="temporary">确认</Button>
      </div>
    </Modal>
    <permission-tree ref="permissionTreeRef"></permission-tree>
  </dt-modal-edit>
</template>

<script setup>
  import { ref } from 'vue'
  import dt from '@dt/dt'
  import apiMgr from '../biz/index.js'
  import permissionTree from './permissionTree.vue'
  // import { editOpt } from '../biz/packOpt'
  const permissionTreeRef = ref()
  function searchPermission(val) {
    permissionTreeRef.value.show(val.id, val.title)
  }
  const sureFlag = ref(false)
  const emits = defineEmits(['successful'])
  const infoVal = ref({
    removeN: '',
    removeW: '',
    addN: '',
    addW: '',

    allN: '',
    allW: ''
  })
  const noSave = () => {
    leaveModal.value = false
  }
  const temporary = () => {
    let duringPackageIds = duringPackage.value.filter((item) => item.checked).map((item) => item.id)
    let extraPackageIds = extraPackage.value.filter((item) => item.checked).map((item) => item.id)
    let params = {
      tenantId: projectPackage.value.id,
      duringPackageIds: duringPackageIds,
      extraPackageIds: extraPackageIds,
      changeType: 9
    }
    apiMgr.changeTenantForWeb(params).then((res) => {
      infoVal.value = {
        removeN: '',
        removeW: '',
        addN: '',
        addW: '',
        allN: '',
        allW: ''
      }
      leaveModal.value = false
      dt.ui.Message.success('项目功能包变更成功')
      emits('successful')
    })
  }
  const duringPackageIdsLast = ref()
  const extraPackageIds = ref()
  const leaveModal = ref(false)
  const onOk = () => {
    let duFlag = duringPackage.value.some((item) => item.checked)
    let exFlag = extraPackage.value.some((item) => item.checked)

    if (!duFlag) {
      dt.ui.Message.warning('请至少选择一个期内套餐')
      return false
    }
    if (!exFlag) {
      dt.ui.Message.warning('请至少选择一个期外套餐')
      return false
    }

    leaveModal.value = true

    // 期内
    infoVal.value.removeN = duringPackage.value
      .filter((item) => item.isNum === 2)
      .map((item) => item.title)
      .join(',')
    infoVal.value.addN = duringPackage.value
      .filter((item) => item.isNum === 3)
      .map((item) => item.title)
      .join(',')
    infoVal.value.allN =
      duringPackage.value
        .filter((item) => item.isNum === 1)
        .map((item) => item.title)
        .join(',') +
      ',' +
      infoVal.value.addN

    // 期外
    infoVal.value.removeW = extraPackage.value
      .filter((item) => item.isNum === 2)
      .map((item) => item.title)
      .join(',')
    infoVal.value.addW = extraPackage.value
      .filter((item) => item.isNum === 3)
      .map((item) => item.title)
      .join(',')

    infoVal.value.allW =
      extraPackage.value
        .filter((item) => item.isNum === 1)
        .map((item) => item.title)
        .join(',') +
      ',' +
      infoVal.value.addW
  }
  const tipsFlag = ref(false)
  const fun = {}
  const permissionVal = ref('1')
  const getTab = () => {}

  const editRef = ref()
  const cancelData = () => {}
  const hide = () => editRef.value.hide()

  const projectPackage = ref({})
  const pack = ref([])
  const duringPackage = ref([]) //期内
  const extraPackage = ref([]) //期外

  const checkedChange = (val, item, val1) => {
    let flg = null
    if (val1 == 1) {
      flg = projectPackage.value.duringPackageIds.includes(item.id)
    } else {
      flg = projectPackage.value.extraPackageIds.includes(item.id)
    }

    if (flg && val) {
      item.isNum = 1
    } else if (flg && !val) {
      item.isNum = 2
    } else if (!flg && val) {
      item.isNum = 3
    } else {
      item.isNum = 0
    }

    console.log(duringPackage.value, extraPackage.value, 'bbbbbb')
  }

  const show = (val, val1) => {
    console.log(val, val1, 'dddd')
    projectPackage.value = val

    pack.value = val1.map((item) => ({ ...item, checked: false }))
    duringPackage.value = pack.value.map((item) => ({
      ...item,
      checked: projectPackage.value.duringPackageIds.includes(item.id),
      isNum: projectPackage.value.duringPackageIds.includes(item.id) ? 1 : 0
    }))

    extraPackage.value = pack.value.map((item) => ({
      ...item,
      checked: projectPackage.value.extraPackageIds.includes(item.id),
      isNum: projectPackage.value.extraPackageIds.includes(item.id) ? 1 : 0
    }))

    editRef.value.show()
  }
  const showModal = ref(false)
  defineExpose({
    show,
    hide
  })
</script>

<style lang="scss" scoped>
  .topBox {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border: 1px #ccc solid;
    background: #f7f4f4;
    padding: 20px 20px;
    line-height: 30px;
    font-size: 16px;
  }

  .tips {
    padding: 5px 10px;
    line-height: 1.4;
    font-size: 14px;
    background: rgba(254, 252, 236, 1);
    margin: 10px;
    .tips_icon {
      font-size: 20px;
      color: #0f42a7;
      vertical-align: sub;
    }
  }
  .title {
    position: relative;
    padding-left: 16px;
    margin: 10px 0;
  }
  .title::before {
    content: '';
    width: 8px;
    height: 16px;
    background: #2d61f4;
    position: absolute;
    left: 0;
    top: 4px;
  }
  .permissionCon {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap; /* 设置换行 */
    max-height: 50vh;
    overflow-x: hidden;
    overflow-y: auto;
    .permissionBox {
      border: 1px #eee solid;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 20px;
      margin-bottom: 10px;
      position: relative;
      .sp {
        position: absolute;
        top: 0;
        right: 0;

        color: #fff;
        padding: 0 5px;
        font-size: 12px;
      }
      .sp1 {
        background: #2d61f4;
      }
      .sp2 {
        background: #ff9900;
      }
      .sp3 {
        background: #19be6b;
      }
      .checkCon {
        width: 20px;
      }
      .permiss {
        flex: 1;
        .p1 {
          font-size: 14px;
          font-weight: bold;
          span {
            font-weight: normal;
            color: #2d61f4;
            cursor: pointer;
          }
        }
        .p2 {
          line-height: 2;
          margin-top: 10px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; /* 设置最大行数为2 */
          overflow: hidden;
          text-overflow: ellipsis; /* 文本超出显示省略号 */
        }
      }
    }
  }
  .leaveBtnBox {
    width: 200px;
    margin: 0 auto;
    padding: 20px 0;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .classBox {
    background: #eef3ff;
    padding: 10px;
  }
</style>
